<template>
  <view class="ithui-content">
    <view class="withdraw">
      <view class="withdraw-head">
        <view class="withdraw-head-to">到账渠道</view>
        <view class="withdraw-head-way">
          <view class="withdraw-head-way-1">
            <u-icon name="red-packet-fill" :size="18" color="#ff0000"></u-icon>
            <text class="way-text">微信零钱</text>
          </view>
         <!-- <view class="withdraw-head-way-2">仅支持整数</view> -->
        </view>
      </view>
      <view class="withdraw-body">
        <text>提现金额</text>
        <view class="input-money">
          <view class="money-tag-white" :class="{'on': item == amount, is: 'off'}" v-for="item in amountList" @click="handleAmount(item)">{{ item }}</view>
          <!-- <text class="rmb">￥</text>
          <input
            v-model.number="extract"
            type="text"
            @focus.prevent="stopKeyborad"
            class="t-input"
          /> -->
        </view>
        <view class="info-money">
          <view>
            <text class="info-money-num">当前可提现余额{{ userInfo.prizeTotal }}元，</text>
            <!-- <text class="info-money-all" @click="getAll">全部提现</text> -->
          </view>
        </view>
        <view>
          <u-button type="success" text="提现" @click="doPay"></u-button>
        </view>
      </view>
      <u-modal
        :show="showModal"
        title="提现确认"
        showCancelButton
        cancelText="我再想想"
        confirmColor="#ff1e0f"
        confirmText="确认提现"
        @confirm="getMoney"
        @cancel="showModal = false"
      >
        <view class="slot-content">
          <rich-text :nodes="content"></rich-text>
        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import { pay } from '@/api/user'
export default {
  data() {
    return {
      amount: null,
      amountList: [0.5, 2, 5, '全部']
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    isLogin() {
      return this.$store.getters.token
    }
  },
  onLoad() {},
  methods: {
    handleAmount(num) {
      this.amount = num
    },
	doPay(){
		if(!this.amount) {
			wx.showModal({
			  content: '请选择提现金额。',
			  showCancel: false
			});
			return;
		}
		const resetParams = {
		  userId: this.$store.getters.userInfo.userId,
		  money: this.amount=='全部' ? (this.$store.getters.userInfo.prizeTotal?this.$store.getters.userInfo.prizeTotal:0): this.amount
		}
		pay(resetParams).then((res) => {
                if (res.code === 200) {
                  if (wx.canIUse('requestMerchantTransfer')) {
                    wx.requestMerchantTransfer({
                      mchId: res.data.mchId,
                      appId: wx.getAccountInfoSync().miniProgram.appId,
                      package: res.data.packageInfo,
                      success: (res) => {
                        // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
                        console.log('success:', res);
						if(res.code!=200){
							wx.showModal({
							  content: msg,
							  showCancel: false
							});
						}
                      },
                      fail: (res) => {
                        wx.showModal({
                          content: '提现错误，请联系后台管理员。',
                          showCancel: false,
                        });
                      },
                    });
                  } else {
                    wx.showModal({
                      content: '你的微信版本过低，请更新至最新版本。',
                      showCancel: false,
                    });
                  }
                } else {
					wx.showModal({
					  content: res.msg,
					  showCancel: false
					});
				}
            })
          .catch(() => {
            uni.hideLoading()
          })
	}
  }
}
</script>

<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
::v-deep .u-modal__content {
  justify-content: flex-start;
}

.withdraw-body {
  border-radius: 10px 10px 0 0;
}

.withdraw-head-way-1 {
  display: flex;
  align-items: center;
}

.ithui {
  &-content {
    .withdraw {
      &-head {
        background-color: #f2f2f2;
        display: flex;
        align-content: center;
        padding: 40rpx 60rpx;
        font-size: 28rpx;

        &-way {
          display: flex;
          flex-direction: column;
          align-content: center;
          margin-left: 40rpx;

          &-1 {
            color: #576b95;
            margin-bottom: 20rpx;

            .way-icon {
              width: 36rpx;
              height: 36rpx;
              margin-right: 10rpx;
              top: 4rpx;
            }
          }

          &-2 {
            color: #acacac;
            font-size: 26rpx;
          }
        }
      }

      &-body {
        background-color: #fff;
        padding: 40rpx 60rpx;
        font-size: 28rpx;

        .input-money {
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          font-weight: 600;
          padding-top: 20rpx;

          .rmb {
            font-size: 2em;
            top: 20rpx;
            position: relative;
          }

          .t-input {
            height: 1.9em;
            font-size: 2.5em;
            border: none;
            position: relative;
            left: 3.5%;
            outline: none;
          }
        }

        .info-money {
          margin-top: 20rpx;
          font-size: 24rpx;
          margin-bottom: 40rpx;
          border-top: 1px #e4e4e4 solid;
          padding-top: 20rpx;

          &-num {
            color: #b2b2b2;
          }

          &-all {
            color: #576b95;
          }
        }

        .tx {
          button {
            color: #b2b2b2;
          }
        }

        .tx-active {
          button {
            color: #fff;
            background: #07c160;
          }
        }
      }

      .keyboard {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #ebebeb;
        display: flex;
        justify-content: center;
        z-index: 2;
        flex-wrap: wrap;
        transition: all 0.2s ease-in 0.2s;
      }

      .active {
        bottom: -400rpx;
      }

      .keyboard-item {
        box-sizing: border-box;
        width: 250rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fff;
        font-size: 40rpx;
        color: #333;
        height: 99rpx;
        border: 1rpx solid #ebebeb;
        border-top: none;
        border-left: none;
      }

      .hide {
        opacity: 0;
      }

      .delte {
        background: none;
        box-shadow: none;
      }

      .delte image {
        width: 60rpx;
        height: 60rpx;
      }

      .isIphone {
        padding-bottom: 68rpx !important;
      }

      .fee {
        em {
          font-size: 0.5rem;
          font-style: normal;
        }
      }
    }
  }
}
.money-tag-white {
  width: 75rpx;
  padding: 10px 16px;
  margin: 10rpx 10rpx 5rpx 5rpx;
  border-radius: 12px;
  background: #fff;
  border: 1px #e0e0e0 solid;
  color: #333;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  &.on{
    background-color: #5ac725;
    color: #fff;
  }
}

</style>
